import React, { useEffect, useState } from 'react';
import { Button , Table  ,notification,Switch ,Form, Input, Select} from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import service from '../../../api';
import _ from 'lodash'//lodash是一个常用工具函数集合库
import './search.scss'
import { log } from 'console';

interface Props {}

interface DataType {
    key: string;
    img1:string
    issale:number
    isrecommend:number
    isseckill:number 
    proid : string
    }

function Search(props:Props) {

    var [pagination,setPagination] = useState({current:0,pageSize:0})
    var [searchlist,setSearchlist] = useState([])
    var [catelist,setCatelist] = useState([])
    var [searchvalue,setSearchvalue] = useState('')
    var [inputvalue,setInputvalue] = useState('')

    const [form] = Form.useForm();
    const { Option } = Select;

    // 请求产品数据
    var request_pro_list = async () =>{
        var res = await service.pro.pro_list()
        console.log(res.data);
        if(res.data.code == 200) {
            setSearchlist(res.data.data)
        }
    }

    // 获取商品分类
    var request_pro_getCategory = async () =>{
        var res = await service.pro.pro_getCategory()
        console.log(res.data);
        if(res.data.code == 200) {
            setCatelist(res.data.data)
        }
    }

    useEffect(()=>{
        request_pro_list();
        request_pro_getCategory()
    },[])

    // 分页时执行
    var onPageChange =( pagination:any)=>{ 
        setPagination(pagination)
    }

    // 更新flag状态
    var handleChange = async (checked:any,proid:any,type:any)=>{
        var res = await service.pro.pro_updateFlag({proid,flag:checked,type})    
        notification.destroy()
        if(res.data.code == 200) {
            notification.success({message:'更新flag成功'}) 
            // 查找产品，更改产品的状态
            var item:any = searchlist.find((item:any)=>item.proid==proid)
            if(item){
                item[type] = 1- item[type]
            }
            // 让组件更新
            var newsearchlist = _.cloneDeep(searchlist)
            setSearchlist(newsearchlist)
        }
    }

    const { Search } = Input;

    const suffix = (
        <AudioOutlined
        style={{
            fontSize: 16,
            color: '#1890ff',
        }}
        />
    );

    // 获取下拉选择框选择的值
    const onGenderChange = (value: string) => {
        console.log(value);
        setSearchvalue(value)
    };

    // 点击查询
    const onSearch =async (value: string) => {
        setInputvalue(value)
        // 筛选数据
        var res = await service.pro.pro_searchPro({category:searchvalue,search:value})
        console.log(res.data);
        if(res.data.code == 200) {
            setSearchlist(res.data.data)
            setSearchvalue('')
            setInputvalue('')
        }
    }

    var clear =async () =>{
        var res = await service.pro.pro_list()
        console.log(res.data);
        if(res.data.code == 200) {
            setSearchlist(res.data.data)
            setSearchvalue('')
        }
    }
    
    // 表格列的配置项 
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            align: 'center',
            key: 'name',
            render: (_,record,index) => <div>{ (pagination.current-1) * pagination.pageSize +  index+1 }</div>
        },
        {
            title: '图片 ',
            align: 'center',
            width:120,
            key: '2',
            render: (_,record,index) => <img src={record.img1} />
        },
        {
            title: '名称',
            align: 'center',
            width:200,
            key: '3',
            dataIndex:'proname'
        },
        {
            title: '品牌 ',
            align: 'center',
            key: '4',
            dataIndex:'brand'
        },
        {
            title: '分类',
            align: 'center',
            key: '5',
            dataIndex:'category'
        },
        {  
            title: '原价',
            align: 'center',
            key: '6',
            dataIndex:'originprice'
        },
        {
            title: '折扣',
            align: 'center',
            key: '7',
            dataIndex:'discount'
        },
        {
            title: '销量',
            align: 'center',
            key: '8',
            dataIndex:'sales'
        },
        {
            title: '是否售卖',
            align: 'center',
            key: '9',
            render: (_,record,index) => <Switch checked={record.issale == 1}  onChange={(checked)=>{  handleChange(checked,record.proid,'') }} />,
        },
        {
            title: '是否秒杀',
            align: 'center',
            key: '10',
            render: (_,record,index) => <Switch checked={record.isseckill == 1}  onChange={(checked)=>{  handleChange(checked,record.proid,'isseckill')}} />,
        },
        {
            title: '是否推荐',
            align: 'center',
            key: '11',
            render: (_,record,index) => <Switch checked={record.isrecommend ==1}  onChange={(checked)=>{ handleChange(checked,record.proid,'isrecommend') } }/>,
        },
        {
            title: '操作',
            align: 'center',
            key: '12',
            render: (_,record,index) => <Button type="primary" danger >Delete</Button>
        },
    ]

    return (
        <div className='search'>
            <div className="search-top">
                <Form
                    form={form}
                    name="control-hooks"
                    // onFinish={onFinish}
                    style={{ width: 130,marginTop:4}}
                >
                    <Form.Item>
                        <Select
                        placeholder={'口红'}
                        onChange={onGenderChange}
                        allowClear
                        onClear={clear}
                        >
                            {
                                catelist.map((item)=>{
                                    return (
                                        <Option value={item}>{item}</Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>
                </Form>

                <Search style={{width:450,marginLeft:10}}
                    placeholder="请输入要查询的关键字..."
                    enterButton="Search"
                    size="large"
                    allowClear
                    suffix={suffix}
                    onSearch={onSearch}
                />
            </div>
            <Table onChange={onPageChange} className='table' columns={columns}  dataSource={searchlist} style={{marginTop:2}}/>
        </div>
    );
}

export default Search;